<template>
    <div style="height: 100%">
        <el-table
            :data="tableData"
            size="mini"
            height="300"
            style="overflow: auto"
            :row-style="{ backgroundColor: '#d8e5f3' }"
            :header-row-style="{ backgroundColor: '#d8e5f3' }"
            border
        >
            <el-table-column show-overflow-tooltip :formatter="fomatterParam" prop="fundCodeText" label="产品代码" align="center"></el-table-column>
            <el-table-column show-overflow-tooltip :formatter="fomatterParam" prop="fundNameSt" label="产品简称" align="center"></el-table-column>
            <el-table-column show-overflow-tooltip :formatter="fomatterParam" prop="stockCode" label="证券代码" align="center"></el-table-column>
            <el-table-column show-overflow-tooltip :formatter="fomatterParam" prop="stockNameSt" label="证券简称" align="center"></el-table-column>
            <el-table-column show-overflow-tooltip :formatter="fomatterParam" prop="dataType" label="数据类型" align="center"></el-table-column>
            <el-table-column show-overflow-tooltip :formatter="fomatterParam" prop="amount" label="数量" align="center"></el-table-column>
            <el-table-column show-overflow-tooltip :formatter="fomatterParam" prop="price" label="价格" align="center"></el-table-column>
            <el-table-column show-overflow-tooltip :formatter="fomatterParam" prop="marketValue" label="市值" align="center"></el-table-column>
            <el-table-column
                show-overflow-tooltip
                v-if="tableColumn.indexOf('dealAmount') > -1"
                :formatter="fomatterParam"
                prop="dealAmount"
                label="成交数量"
                align="center"
            ></el-table-column>
            <el-table-column
                show-overflow-tooltip
                v-if="tableColumn.indexOf('dealPrice') > -1"
                :formatter="fomatterParam"
                prop="dealPrice"
                label="成交价格"
                align="center"
            ></el-table-column>
            <el-table-column
                show-overflow-tooltip
                v-if="tableColumn.indexOf('dealMarketValue') > -1"
                :formatter="fomatterParam"
                prop="dealMarketValue"
                label="成交市值"
                align="center"
            ></el-table-column>
            <el-table-column show-overflow-tooltip prop="sourceType" label="数据来源" align="center">
                <template slot-scope="scope">
                    {{ SourceType[scope.row.sourceType] }}
                </template>
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                :formatter="fomatterParam"
                v-if="tableColumn.indexOf('issueInnerGrade') > -1"
                prop="issueInnerGrade"
                label="发行人内部评级"
                min-width="120px"
                align="center"
            ></el-table-column>
            <el-table-column
                show-overflow-tooltip
                :formatter="fomatterParam"
                v-if="tableColumn.indexOf('issueNameSt') > -1"
                prop="issueNameSt"
                label="发行人信息"
                min-width="130px"
                align="center"
            ></el-table-column>
            <el-table-column
                v-if="WEB_DOCKING !== 'MAXWEALTH'"
                show-overflow-tooltip
                :formatter="fomatterParam"
                prop="issueOutGrade"
                label="主体评级"
                align="center"
            ></el-table-column>
            <el-table-column
                v-if="WEB_DOCKING !== 'MAXWEALTH'"
                show-overflow-tooltip
                :formatter="fomatterParam"
                prop="stockOutGrade"
                label="债项评级"
                align="center"
            ></el-table-column>
            <el-table-column
                show-overflow-tooltip
                v-if="tableColumn.indexOf('remainingMaturityDay') > -1"
                :formatter="fomatterParam"
                prop="remainingMaturityDay"
                label="剩余期限（天）"
                min-width="130px"
                align="center"
            ></el-table-column>
        </el-table>
        <el-pagination
            background
            @current-change="handlePage"
            layout="total, prev, pager, next"
            :total="paging.total"
            :page-size="paging.pageSize"
            :current-page.sync="paging.currentPage"
        >
        </el-pagination>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { accMul, customToFixed, getConfigItem, getCurrentPageData, numberFormatXDAY, NumberToWords, thousandsFormat } from '@/utils/tools';
import DictionConstUtil from '@/utils/diction-const-util';
export interface paging {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({ name: 'ItemRealTimeStockDetail' })
export default class ItemRealTimeStockDetail extends Vue {
    @Prop() data: any[];

    WEB_DOCKING = getConfigItem('WEB_DOCKING');

    private tableData: any[] = [];
    private tableColumn: string[] = [];
    private SourceType = DictionConstUtil.SourceType;

    // 分页
    private paging = { currentPage: 1, pageSize: 20, total: 0 };

    @Watch('data', { immediate: true, deep: true })
    async watchData() {
        this.handlePage(1);
    }

    async handlePage(val: number) {
        let tableData = this.currentChange(val);
        for (const item of tableData) {
            item.fundCodeText = (await DictionConstUtil.FNFundShowCode(item.fundCode)) || '';
        }
        this.tableData = tableData;
        this.tableData.forEach(row => {
            this.tableColumn = this.tableColumn.concat(Object.keys(row).filter(v => !this.tableColumn.includes(v)));
        });
    }

    currentChange(val: number): any[] {
        // console.log(this.tableData, 'table');
        if (this.data && this.data.length) {
            this.paging.total = this.data.length;
        } else {
            this.paging.total = 0;
        }
        // this.page.total = this.tableData.length ? this.tableData.length : 0;
        this.paging.currentPage = val;
        return getCurrentPageData(this.data, this.paging.currentPage, this.paging.pageSize);
    }

    fomatterParam(row, column, cellValue) {
        // 处理科学科学计数法
        if (['dealMarketValue', 'marketValue', 'dealAmount', 'amount'].indexOf(column.property) > -1) {
            if (cellValue || cellValue == 0) {
                if (!isNaN(Number(cellValue))) {
                    if (['dealMarketValue', 'marketValue'].indexOf(column.property) > -1) {
                        return this.numberFormat2(parseFloat(cellValue));
                    }
                    return parseFloat(cellValue);
                }
            } else {
                return '--';
            }
        }
        if (['price', 'dealPrice'].indexOf(column.property) > -1 && (cellValue || cellValue == 0)) {
            return this.numberFormat2(cellValue);
        }
        return cellValue || cellValue == 0 ? cellValue : '--';
    }

    /**
     * 小数点保留2位 同O32
     */
    numberFormat2(number: any, formatParam?) {
        let value;
        if (number === undefined) {
            return '';
        }
        value = Number(number);
        if (formatParam == undefined || formatParam == '无') {
            value = Number(number).toFixed(2);
            return thousandsFormat(value);
        }
        let n;
        if (!isNaN(formatParam.toString()) && (n = Number(formatParam)) >= 0 && n % 1 == 0) {
            // value = value.toFixed(n); // toFixed()四舍五入精度处理有问题
            value = customToFixed(value, n);
        }
        switch (formatParam) {
            case '%':
                value = accMul(value, 100).toFixed(2);
                break;
            case '%%':
                value = accMul(value, 1000).toFixed(2);
                break;
            case '万股':
                value = (value / 10000).toFixed(2);
                break;
            case '万元':
                value = (value / 10000).toFixed(2);
                break;
            case '亿元':
                value = (value / 100000000).toFixed(2);
                break;
            case '元':
                value = customToFixed(value, 2);
                break;
            case '年':
                // 经确认 年 后台已处理
                // value = Math.floor(value / 365);
                value = customToFixed(value, 2);
                break;
            default:
                break;
        }
        return thousandsFormat(value);
    }
}
</script>
